<template>
    <div>
        <v-data-table
            item-key="id"
            :headers="headers"
            :items="items"
            no-data-text="没有数据..."
            :page.sync="pageNo"
            :items-per-page="pageSize"
            hide-default-footer
        >
            <template v-slot:[`item.money`]="{ item }">
                <span class="green--text" v-if="item.money > 0">
                    +{{item.money}}
                </span>
                <span class="red--text" v-else-if="item.money < 0">
                    {{item.money}}
                </span>
                <span v-else>
                    {{item.money}}
                </span>
            </template>
        </v-data-table>

         <v-row v-if="items.length > 0 && totalPage > 1" class="mt-2">
            <v-col cols="12">
                <v-pagination
                    v-model="pageNo"
                    :length="totalPage"
                    :total-visible="7"
                    @input="onPageChange"
                ></v-pagination>
            </v-col>
        </v-row>
    </div>
</template>

<script>
    import axios from "axios";
    import AutocompleteOrg from "../../../widgets/AutocompleteOrg.vue";
    import AutocompleteUser from "../../../widgets/AutocompleteUser.vue";
    import { mapGetters } from 'vuex';

    export default {
        data: () => ({
            id: 0,
            headers: [
                { text: '时间', value: 'created_at', width: 200 },
                { text: '类别', value: 'category_name', width: 100  },
                { text: '金额', value: 'money', width: 100  },
                { text: '跟踪记录', value: 'comment' },
            ],
            items: [],
            pageNo: 1,
            pageSize: 8,
            totalPage: 0,
        }),

        components: {
            AutocompleteOrg: AutocompleteOrg,
            AutocompleteUser: AutocompleteUser
        },

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager'
            ]),
        },

        watch: {
            id(v) {
                this.items = [];
                this.pageNo = 1;
                this.totalPage = 0;
                this.loadPage();
            }
        },

        created() {
            this.id = this.$route.params.id;
        },

        beforeRouteUpdate(to, from, next) {
            this.id = to.params.id;
            next();
        },

        methods: {
            onPageChange() {
                this.loadPage();
            },
            loadPage() {
                  axios.get(`/user/${this.id}/money`, { params:
                    {
                        pageSize: this.pageSize,
                        page: this.pageNo
                    }
                }).then((response) => {
                    if(response.data.code == 0) {
                        this.items = this.items.concat(response.data.data.data);
                        if (response.data.data.data.length == 0 ) {
                            // hide loadmore
                            this.totalPage = 0;
                        } else {
                            this.totalPage = response.data.data.last_page;
                        }
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },

        }
    }
</script>
